{% extends 'sims/base.html' %}

{% block title %}
    日程安排
{% endblock %}

{% block description %}
    日程安排
{% endblock %}

{% block navbar_top %}
    <a class="nav-item nav-link active" href="{% url 'sims:schedule' %}">日程安排</a>
{% endblock %}

{% block body_content %}

    <h5 class="page-header" style="margin-top: 20px"></h5>
{#    {% ifequal edit_mode "cannot_edit" %}#}
        <!-- 提示信息 -->
        {% if message_success %}
            <h5 class="page-header" style="margin-top: 20px"></h5>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ message_success }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% elif message_warn %}
            <h5 class="page-header" style="margin-top: 20px"></h5>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>{{ message_warn }}</strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        {% endif %}
        <div class="row">
            <div class="col-3 px-0">
                <button type="button" class="btn btn-dark btn-block"
                        data-toggle="modal" data-target="#modal_add">添加新日程
                </button>
            </div>
            <div class="col-9"></div>
        </div>
        <!-- 添加新内容 -->
        <div class="modal fade" id="modal_add" tabindex="-100" role="dialog" aria-labelledby="modal_addLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <h5 class="text-center" id="modal_addLabel">添加新日程
                                    <button type="button" class="close float-right"
                                            data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                </h5>
                            </div>
                        </div>
                        <hr class="my-4">
                        <div class="row">
                            <div class="col">
                                <form action="/schedule/" method="POST">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.theme.label_tag }}
                                                {{ schedule_form.theme }}
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.important_level.label_tag }}
                                                {{ schedule_form.important_level }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.title }}
                                                <small class="form-text text-muted">
                                                    标题字数限制在2~20
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.content }}
                                                <small class="form-text text-muted">
                                                    内容字数限制在6~50
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.start_date.label_tag }}
                                                {{ schedule_form.start_date }}
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.end_date.label_tag }}
                                                {{ schedule_form.end_date }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group">
                                                {{ schedule_form.alert_mode.label_tag }}
                                                {{ schedule_form.alert_mode }}
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block btn-lg">提交</button>
                                </form>
                            </div>
                        </div>
                        <h5 class="page-header" style="margin-top: 20px"></h5>
                    </div>
                </div>
            </div>
        </div>
        <h5 class="page-header" style="margin-top: 20px"></h5>
        {% if schedule_item %}
            <div class="row">
                <div class="col px-0">
                    <table class="table table-hover">
                        <thead class="thead-light">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">日程主题</th>
                            <th scope="col">日程标题</th>
                            <th scope="col">日程内容</th>
                            <th scope="col">重要程度</th>
                            <th scope="col">开始时间</th>
                            <th scope="col">结束时间</th>
                            <th scope="col">提醒方式</th>
                            <th scope="col">状态</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for foo in schedule_item %}
                            <form action="/schedule/" method="POST">
                                {% csrf_token %}
                                <tr>
                                    <th scope="row">{{ forloop.counter }}</th>
                                    <td>{{ foo.theme }}</td>
                                    <td>{{ foo.title }}</td>
                                    <td>{{ foo.content }}</td>
                                    <td>{{ foo.important_level }}</td>
                                    <td>{{ foo.start_date }}</td>
                                    <td>{{ foo.end_date }}</td>
                                    <td>{{ foo.alert_mode }}</td>
                                    <td>{{ foo.status }}</td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button type="submit" class="btn btn-danger" value="{{ foo.title }}"
                                                    name="del">删除
                                            </button>
{#                                            <button type="submit" class="btn btn-success" value="{{ foo.title }}"#}
{#                                                    name="edit_mode">编辑#}
{#                                            </button>#}
                                        </div>
                                    </td>
                                </tr>
                            </form>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% else %}
            <p class="lead">暂无日程</p>
        {% endif %}
{#        {% else %}#}
{#        <div class="row">#}
{#            <div class="col px-0">#}
{#                <div class="card mb-3">#}
{#                    <div class="card-header">#}
{#                        <h3>编辑日程信息</h3>#}
{#                    </div>#}
{#                    <div class="card-body">#}
{#                        <div class="row">#}
{#                            <div class="col-7">#}
{#                                <form action="/schedule/" method="POST">#}
{#                                    {% csrf_token %}#}
{#                                    <div class="row">#}
{#                                        <div class="col">#}
{#                                            <h3 class="text-center">#}
{#                                                查看并编辑你的日程!#}
{#                                                <button type="submit" class="btn btn-success" value="cannot_edit"#}
{#                                                        name="edit_mode">保存修改#}
{#                                                </button>#}
{#                                            </h3>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                    <h5 class="page-header" style="margin-top: 30px"></h5>#}
{#                                    {% if message_warn %}#}
{#                                        <h5 class="page-header" style="margin-top: 20px"></h5>#}
{#                                        <div class="alert alert-warning alert-dismissible fade show" role="alert">#}
{#                                            <strong>{{ message_warn }}</strong>#}
{#                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">#}
{#                                                <span aria-hidden="true">&times;</span>#}
{#                                            </button>#}
{#                                        </div>#}
{#                                    {% elif message_success %}#}
{#                                        <h5 class="page-header" style="margin-top: 20px"></h5>#}
{#                                        <div class="alert alert-success alert-dismissible fade show" role="alert">#}
{#                                            <strong>{{ message_success }}</strong>#}
{#                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">#}
{#                                                <span aria-hidden="true">&times;</span>#}
{#                                            </button>#}
{#                                        </div>#}
{#                                    {% endif %}#}
{#                                    <div class="row shadow p-2 rounded">#}
{#                                        <div class="col">#}
{#                                            <div class="row">#}
{#                                                <div class="col">#}
{#                                                    <h4>基本信息</h4>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 20px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-3">#}
{#                                                    <p class="lead">主题:</p>#}
{#                                                </div>#}
{#                                                <div class="col-9">#}
{#                                                    <p class="lead">{{ edit_schedule_form.theme }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 10px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-3">#}
{#                                                    <p class="lead">标题:</p>#}
{#                                                </div>#}
{#                                                <div class="col-9">#}
{#                                                    <p class="lead">{{ edit_schedule_form.title }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 10px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-3">#}
{#                                                    <p class="lead">内容:</p>#}
{#                                                </div>#}
{#                                                <div class="col-9">#}
{#                                                    <p class="lead">{{ edit_schedule_form.content }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                    <h5 class="page-header" style="margin-top: 60px"></h5>#}
{#                                    <div class="row shadow p-2 rounded">#}
{#                                        <div class="col">#}
{#                                            <div class="row">#}
{#                                                <div class="col">#}
{#                                                    <h4>时间信息</h4>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 20px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-4">#}
{#                                                    <p class="lead">开始时间:</p>#}
{#                                                </div>#}
{#                                                <div class="col-8">#}
{#                                                    <p class="lead">{{ edit_schedule_form.start_date }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 10px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-4">#}
{#                                                    <p class="lead">截止时间:</p>#}
{#                                                </div>#}
{#                                                <div class="col-8">#}
{#                                                    <p class="lead">{{ edit_schedule_form.end_date }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                    <h5 class="page-header" style="margin-top: 60px"></h5>#}
{#                                    <div class="row shadow p-2 rounded">#}
{#                                        <div class="col">#}
{#                                            <div class="row">#}
{#                                                <div class="col">#}
{#                                                    <h4>日程状态</h4>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 20px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-3">#}
{#                                                    <p class="lead">重要程度:</p>#}
{#                                                </div>#}
{#                                                <div class="col-9">#}
{#                                                    <p class="lead">{{ edit_schedule_form.important_level }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                            <h5 class="page-header" style="margin-top: 15px"></h5>#}
{#                                            <div class="row">#}
{#                                                <div class="col-3">#}
{#                                                    <p class="lead">提醒方式:</p>#}
{#                                                </div>#}
{#                                                <div class="col-9">#}
{#                                                    <p class="lead">{{ edit_schedule_form.alert_mode }}</p>#}
{#                                                </div>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </form>#}
{#                            </div>#}
{#                            <div class="col-5">#}
{#                                <div class="jumbotron">#}
{#                                    <h1 class="display-4">日程倒计时</h1>#}
{#                                    <hr class="my-4">#}
{#                                    <p class="lead">距离截止时间还剩:</p>#}
{#                                    <h1 class="display-4 text-center">{{ user_item.thing_all }}</h1>#}
{#                                    <p class="lead text-center">天</p>#}
{#                                    <h1 class="display-4 text-center">{{ user_item.thing_finished }}</h1>#}
{#                                    <p class="lead text-center">小时</p>#}
{#                                    <h1 class="display-4 text-center">{{ user_item.thing_finished }}</h1>#}
{#                                    <p class="lead text-center">分钟</p>#}
{#                                    <p class="lead">#}
{#                                        <a class="btn btn-primary btn-lg" href="{% url 'sims:index' %}"#}
{#                                           role="button">了解更多</a>#}
{#                                    </p>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    {% endifequal %}#}

{% endblock %}

{% block navbar_left %}
    <div class="navbar-nav">
        <a class="nav-item nav-link" href="{% url 'sims:index' %}">主页</a>
        <a class="nav-item nav-link active" href="{% url 'sims:schedule' %}">日程安排</a>
        <a class="nav-item nav-link" href="{% url 'sims:to_do' %}">待办事项</a>
        <a class="nav-item nav-link" href="{% url 'sims:history' %}">历史活动</a>
        <a class="nav-item nav-link" href="{% url 'sims:user_control' %}">个人中心</a>
    </div>
{% endblock %}